<template>
  <div class="pollution-source" :key="$route.fullPath">
    <!-- 顶部标题 -->
    <header class="page-header">
      <h1>灵璧县人工智能产业园环境污染源监测</h1>
      <div class="current-time">{{ currentTime }}</div>
    </header>

    <div class="page-content">
      <!-- 左侧面板 -->
      <section class="left-panel">
        <div class="panel-item alarm-statistics">
          <h3>预警统计</h3>
          <div class="alarm-grid">
            <div class="alarm-card" v-for="(item, index) in alarmStats" :key="index" :class="item.level">
              <div class="alarm-icon" :class="item.icon"></div>
              <div class="alarm-info">
                <div class="alarm-name">{{ item.name }}</div>
                <div class="alarm-count">{{ item.count }}</div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="panel-item alarm-trend">
          <h3>预警趋势</h3>
          <div ref="alarmTrendChartRef" class="chart-container"></div>
        </div>
        
        <div class="panel-item alarm-distribution">
          <h3>预警分布</h3>
          <div ref="alarmDistributionChartRef" class="chart-container"></div>
        </div>
      </section>

      <!-- 右侧面板 -->
      <section class="right-panel">
        <div class="panel-item alarm-list">
          <h3>实时预警</h3>
          <div class="alarm-tabs">
            <div 
              v-for="(tab, index) in alarmTabs" 
              :key="index" 
              :class="['tab-item', { active: currentTab === tab.id }]"
              @click="currentTab = tab.id"
            >
              {{ tab.name }}
              <span class="badge" v-if="tab.count > 0">{{ tab.count }}</span>
            </div>
          </div>
          
          <div class="alarm-table-container">
            <table class="alarm-table">
              <thead>
                <tr>
                  <th>监测点</th>
                  <th>监测项</th>
                  <th>数值</th>
                  <th>标准值</th>
                  <th>状态</th>
                  <th>时间</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(alarm, index) in filteredAlarms" :key="index" :class="alarm.level">
                  <td>{{ alarm.location }}</td>
                  <td>{{ alarm.item }}</td>
                  <td>{{ alarm.value }}</td>
                  <td>{{ alarm.standard }}</td>
                  <td>
                    <span class="status-badge" :class="alarm.level">
                      {{ alarm.status }}
                    </span>
                  </td>
                  <td>{{ alarm.time }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        
        <div class="panel-item equipment-status">
          <h3>设备运行状态</h3>
          <div class="equipment-grid">
            <div 
              v-for="(equipment, index) in equipmentStatus" 
              :key="index" 
              class="equipment-card"
              :class="equipment.status"
            >
              <div class="equipment-icon" :class="equipment.type"></div>
              <div class="equipment-info">
                <div class="equipment-name">{{ equipment.name }}</div>
                <div class="equipment-detail">
                  <span class="status-dot" :class="equipment.status"></span>
                  <span>{{ equipment.statusText }}</span>
                </div>
              </div>
              <div class="equipment-metrics">
                <div class="metric-item">
                  <span class="metric-label">运行时间</span>
                  <span class="metric-value">{{ equipment.runtime }}</span>
                </div>
                <div class="metric-item">
                  <span class="metric-label">处理量</span>
                  <span class="metric-value">{{ equipment.throughput }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import dayjs from 'dayjs'

// 状态初始化
const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
const alarmTrendChartRef = ref<HTMLElement | null>(null)
const alarmDistributionChartRef = ref<HTMLElement | null>(null)
const currentTab = ref('all')

// 预警统计数据
const alarmStats = ref([
  { name: '污水排口', count: 3, level: 'warning', icon: 'water' },
  { name: '雨水排口', count: 1, level: 'danger', icon: 'rain' },
  { name: '废气排口', count: 5, level: 'warning', icon: 'gas' },
  { name: '设备异常', count: 2, level: 'normal', icon: 'equipment' }
])

// 预警标签页
const alarmTabs = ref([
  { id: 'all', name: '全部', count: 11 },
  { id: 'water', name: '污水排口', count: 3 },
  { id: 'rain', name: '雨水排口', count: 1 },
  { id: 'gas', name: '废气排口', count: 5 },
  { id: 'equipment', name: '设备异常', count: 2 }
])

// 预警数据
const alarmData = ref([
  { 
    type: 'water', 
    location: '污水处理站1号', 
    item: 'COD', 
    value: '120mg/L', 
    standard: '≤100mg/L', 
    status: '超标', 
    level: 'warning',
    time: '2025-03-30 18:45:12' 
  },
  { 
    type: 'water', 
    location: '污水处理站2号', 
    item: '氨氮', 
    value: '25mg/L', 
    standard: '≤15mg/L', 
    status: '超标', 
    level: 'warning',
    time: '2025-03-30 18:30:05' 
  },
  { 
    type: 'water', 
    location: '污水处理站3号', 
    item: 'pH值', 
    value: '9.2', 
    standard: '6.5-8.5', 
    status: '超标', 
    level: 'warning',
    time: '2025-03-30 17:55:33' 
  },
  { 
    type: 'rain', 
    location: '雨水排口1号', 
    item: '悬浮物', 
    value: '85mg/L', 
    standard: '≤30mg/L', 
    status: '严重超标', 
    level: 'danger',
    time: '2025-03-30 19:10:22' 
  },
  { 
    type: 'gas', 
    location: '废气排口1号', 
    item: '颗粒物', 
    value: '35mg/m³', 
    standard: '≤20mg/m³', 
    status: '超标', 
    level: 'warning',
    time: '2025-03-30 19:05:17' 
  },
  { 
    type: 'gas', 
    location: '废气排口2号', 
    item: '二氧化硫', 
    value: '180mg/m³', 
    standard: '≤150mg/m³', 
    status: '超标', 
    level: 'warning',
    time: '2025-03-30 18:50:45' 
  },
  { 
    type: 'gas', 
    location: '废气排口3号', 
    item: '氮氧化物', 
    value: '110mg/m³', 
    standard: '≤100mg/m³', 
    status: '超标', 
    level: 'warning',
    time: '2025-03-30 18:40:33' 
  },
  { 
    type: 'gas', 
    location: '废气排口4号', 
    item: 'VOCs', 
    value: '3.5mg/m³', 
    standard: '≤2.0mg/m³', 
    status: '超标', 
    level: 'warning',
    time: '2025-03-30 18:25:19' 
  },
  { 
    type: 'gas', 
    location: '废气排口5号', 
    item: '臭气浓度', 
    value: '25', 
    standard: '≤20', 
    status: '超标', 
    level: 'warning',
    time: '2025-03-30 18:15:08' 
  },
  { 
    type: 'equipment', 
    location: '污水泵1号', 
    item: '电流', 
    value: '25A', 
    standard: '≤20A', 
    status: '异常', 
    level: 'normal',
    time: '2025-03-30 19:00:27' 
  },
  { 
    type: 'equipment', 
    location: '风机2号', 
    item: '温度', 
    value: '85℃', 
    standard: '≤70℃', 
    status: '异常', 
    level: 'normal',
    time: '2025-03-30 18:35:51' 
  }
])

// 设备状态数据
const equipmentStatus = ref([
  { 
    name: '污水处理设备1号', 
    type: 'water-treatment', 
    status: 'normal', 
    statusText: '正常运行', 
    runtime: '1250小时', 
    throughput: '125吨/日' 
  },
  { 
    name: '污水处理设备2号', 
    type: 'water-treatment', 
    status: 'warning', 
    statusText: '需要维护', 
    runtime: '2100小时', 
    throughput: '110吨/日' 
  },
  { 
    name: '废气处理设备1号', 
    type: 'gas-treatment', 
    status: 'normal', 
    statusText: '正常运行', 
    runtime: '850小时', 
    throughput: '5000m³/时' 
  },
  { 
    name: '废气处理设备2号', 
    type: 'gas-treatment', 
    status: 'danger', 
    statusText: '故障停机', 
    runtime: '0小时', 
    throughput: '0m³/时' 
  }
])

// 根据当前标签过滤预警数据
const filteredAlarms = computed(() => {
  if (currentTab.value === 'all') {
    return alarmData.value
  } else {
    return alarmData.value.filter(alarm => alarm.type === currentTab.value)
  }
})

// 初始化图表
const initCharts = () => {
  // 预警趋势图
  if (alarmTrendChartRef.value) {
    const chart = echarts.init(alarmTrendChartRef.value)
    chart.setOption({
      grid: {
        top: 30,
        right: 20,
        bottom: 30,
        left: 50,
        containLabel: true
      },
      legend: {
        data: ['污水排口', '雨水排口', '废气排口', '设备异常'],
        textStyle: { color: '#fff' },
        right: 10,
        top: 0
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLine: { lineStyle: { color: '#0ff' } },
        axisLabel: { fontSize: 10, color: '#fff' }
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#0ff' } },
        axisLabel: { fontSize: 10, color: '#fff' },
        splitLine: { lineStyle: { color: 'rgba(0,255,255,0.1)' } }
      },
      series: [
        {
          name: '污水排口',
          type: 'line',
          data: [5, 7, 3, 5, 2, 1, 3],
          smooth: true,
          itemStyle: { color: '#36a3f7' },
          lineStyle: { color: '#36a3f7' }
        },
        {
          name: '雨水排口',
          type: 'line',
          data: [2, 1, 0, 1, 3, 1, 1],
          smooth: true,
          itemStyle: { color: '#f44336' },
          lineStyle: { color: '#f44336' }
        },
        {
          name: '废气排口',
          type: 'line',
          data: [8, 6, 4, 7, 5, 6, 5],
          smooth: true,
          itemStyle: { color: '#ff9800' },
          lineStyle: { color: '#ff9800' }
        },
        {
          name: '设备异常',
          type: 'line',
          data: [3, 2, 4, 1, 2, 3, 2],
          smooth: true,
          itemStyle: { color: '#4caf50' },
          lineStyle: { color: '#4caf50' }
        }
      ]
    })
    
    window.addEventListener('resize', () => {
      chart.resize()
    })
  }
  
  // 预警分布饼图
  if (alarmDistributionChartRef.value) {
    const chart = echarts.init(alarmDistributionChartRef.value)
    chart.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 'center',
        textStyle: { color: '#fff' }
      },
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        data: [
          { value: 3, name: '污水排口', itemStyle: { color: '#36a3f7' } },
          { value: 1, name: '雨水排口', itemStyle: { color: '#f44336' } },
          { value: 5, name: '废气排口', itemStyle: { color: '#ff9800' } },
          { value: 2, name: '设备异常', itemStyle: { color: '#4caf50' } }
        ],
        label: {
          color: '#fff'
        }
      }]
    })
    
    window.addEventListener('resize', () => {
      chart.resize()
    })
  }
}

// 定时器
let timer: number

onMounted(() => {
  // 初始化图表
  initCharts()
  
  // 启动定时器
  timer = setInterval(() => {
    currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  }, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.pollution-source {
  height: 100%;
  background: linear-gradient(135deg, #0a2744 0%, #001529 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 5px;
  box-sizing: border-box;
  overflow: auto;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    height: 28px;

    h1 {
      font-size: 16px;
      margin: 0;
    }
  }

  .page-content {
    display: grid;
    grid-template-columns: 30% 70%;
    gap: 10px;
    flex: 1;
    min-height: 0;
  }

  .left-panel, .right-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 10px;
  }

  .panel-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    
    h3 {
      margin: 0 0 8px 0;
      font-size: 14px;
      color: #0ff;
    }
  }

  .alarm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    
    .alarm-card {
      display: flex;
      align-items: center;
      padding: 8px;
      border-radius: 4px;
      background: rgba(255,255,255,0.05);
      
      &.normal {
        border-left: 3px solid #4caf50;
      }
      
      &.warning {
        border-left: 3px solid #ff9800;
      }
      
      &.danger {
        border-left: 3px solid #f44336;
      }
      
      .alarm-icon {
        width: 24px;
        height: 24px;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.1);
        
        &.water::before {
          content: '💧';
          font-size: 14px;
        }
        
        &.rain::before {
          content: '🌧️';
          font-size: 14px;
        }
        
        &.gas::before {
          content: '💨';
          font-size: 14px;
        }
        
        &.equipment::before {
          content: '⚙️';
          font-size: 14px;
        }
      }
      
      .alarm-info {
        flex: 1;
        
        .alarm-name {
          font-size: 12px;
          color: rgba(255,255,255,0.8);
        }
        
        .alarm-count {
          font-size: 18px;
          font-weight: bold;
          color: #fff;
        }
      }
    }
  }

  .chart-container {
    flex: 1;
    min-height: 150px;
    background: rgba(255,255,255,0.02);
    border-radius: 4px;
  }

  .alarm-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    
    .tab-item {
      padding: 5px 10px;
      font-size: 12px;
      cursor: pointer;
      position: relative;
      
      &.active {
        color: #0ff;
        border-bottom: 2px solid #0ff;
      }
      
      .badge {
        position: absolute;
        top: 0;
        right: 0;
        background: #f44336;
        color: #fff;
        font-size: 10px;
        padding: 0 4px;
        border-radius: 10px;
        transform: translate(50%, -50%);
      }
    }
  }

  .alarm-table-container {
    flex: 1;
    overflow: auto;
    
    .alarm-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      
      th, td {
        padding: 6px 8px;
        text-align: left;
        border-bottom: 1px solid rgba(255,255,255,0.05);
      }
      
      th {
        background: rgba(0,255,255,0.1);
        color: #0ff;
        font-weight: normal;
      }
      
      tr {
        &:hover {
          background: rgba(255,255,255,0.05);
        }
        
        &.warning {
          background: rgba(255, 152, 0, 0.05);
        }
        
        &.danger {
          background: rgba(244, 67, 54, 0.05);
        }
      }
      
      .status-badge {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 10px;
        font-size: 10px;
        
        &.normal {
          background: rgba(76, 175, 80, 0.2);
          color: #4caf50;
        }
        
        &.warning {
          background: rgba(255, 152, 0, 0.2);
          color: #ff9800;
        }
        
        &.danger {
          background: rgba(244, 67, 54, 0.2);
          color: #f44336;
        }
      }
    }
  }

  .equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    
    .equipment-card {
      background: rgba(255,255,255,0.05);
      border-radius: 4px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      
      &.normal {
        border-left: 3px solid #4caf50;
      }
      
      &.warning {
        border-left: 3px solid #ff9800;
      }
      
      &.danger {
        border-left: 3px solid #f44336;
      }
      
      .equipment-icon {
        width: 30px;
        height: 30px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        background: rgba(255,255,255,0.1);
        
        &.water-treatment::before {
          content: '🔄';
          font-size: 16px;
        }
        
        &.gas-treatment::before {
          content: '🌬️';
          font-size: 16px;
        }
      }
      
      .equipment-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .equipment-name {
          font-size: 12px;
          font-weight: bold;
          color: #fff;
        }
        
        .equipment-detail {
          display: flex;
          align-items: center;
          font-size: 11px;
          color: rgba(255,255,255,0.7);
          
          .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 4px;
            
            &.normal {
              background: #4caf50;
              box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
            }
            
            &.warning {
              background: #ff9800;
              box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
            }
            
            &.danger {
              background: #f44336;
              box-shadow: 0 0 5px rgba(244, 67, 54, 0.5);
            }
          }
        }
      }
      
      .equipment-metrics {
        display: flex;
        justify-content: space-between;
        
        .metric-item {
          display: flex;
          flex-direction: column;
          
          .metric-label {
            font-size: 10px;
            color: rgba(255,255,255,0.5);
          }
          
          .metric-value {
            font-size: 12px;
            color: #0ff;
          }
        }
      }
    }
  }
}
</style> 